<template>
	<view>
		<view class="free-filter">
			<view 
			class="free-filter-title" 
			v-for="item in filterList" 
			:key="item.id"
			:class="item.id == current ? 'active' : ''"
			@click="currentTitle(item.id)"
			>
				{{ item.title }}
			</view>
		</view>
		<view class="free-list">
			<!-- 课程列表 -->
			<view class="new-list">
				<view class="new-list-item" v-for=" item in courseList">
					<view class="list-item-img">
						<img :src="item.courseCover" alt="" />
					</view>
					<view class="list-item-info">
						<view class="info-title">
							{{ item.courseName }}
						</view>
						<view class="info-type">
							{{ courseType(item.courseLevel) }}
						</view>
						<view class="info-detail">
							<view class="info-detail-price" v-if="item.salePrice == 0">
								免费
							</view>
							<view class="info-detail-price" v-else>
								<view>
									限时优惠
								</view>
								<view>
									￥ {{ item.salePrice }}
								</view>
							</view>
							<view class="info-detail-count">
								253w人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 免费课程接口
	import { getFreeCourse } from '../../api/course'
	// 引入混入函数
	import { mixins } from '../../mixins/mixins.js'
	
	export default {
		mixins:[mixins],
		data() {
			return {
				current:1,
				courseList:[],
				filterList:[
					{id:1,title:'综合推荐'},
					{id:2,title:'最新'},
					{id:3,title:'浏览最多'}
				],
				courseParams:{pageNum:1.,pageSize:4,entity:{isFree:1}}
			}
		},
		mounted() {
			this.getCourse( this.courseParams )
		},
		methods:{
			getCourse(params) {
				getFreeCourse(params).then(res => {
					this.courseList = res.pageInfo.list
				})
			},
			// 激活当前筛选条件样式
			currentTitle(id) {
				this.current = id
				// 根据id所对应需要请求数据类型的不同更改请求参数
				if(id == 1) {
					this.courseParams.sortBy = ''
				} else if (id == 2) {
					this.courseParams.sortBy = 'time-desc'
				} else if (id == 3) {
					this.courseParams.sortBy = 'clicks-desc'
				}
				this.getCourse(this.courseParams)
			}
		},
	}
</script>

<style>
	.free-filter {
		display: flex;
		padding: 14rpx;
	}
	.free-filter-title {
		padding-left: 44rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #A0A4AD;
	}
	.free-list {
		padding: 14rpx;
	}
	/* 上新好课css样式 */
	.new-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 14rpx;
	}
	.new-title-name {
		font-size: 40rpx;
		font-weight: 400;
		color:#333;
	}
	.new-title-more {
		font-size: 26rpx;
		font-weight: 400;
		color:#A0A4AD;
	}
	.new-list-item {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 40rpx;
		padding: 14rpx;
	}
	.new-list-item:first-child {
		margin-top: 20rpx;
	}
	.new-list-item::after {
		content: '';
		position: absolute;
		border-bottom: 1px solid #000;
		width: 100%;
		bottom: -20rpx;
		margin-top: 20rpx;
		opacity: 0.15;
	}
	.list-item-img img{
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}
	.list-item-info {
		display: flex;
		flex-direction: column;
		height: 186rpx;
		padding-left: 23rpx;
		width: 100%;
		justify-content: space-between;
	}
	.info-title {
		font-size: 29rpx;
		color: #191919;
		font-weight: 400;
	}
	.info-type {
		font-size: 24rpx;
		color: #c5c5c5;
		font-weight: 400;
	}
	.info-detail {
		display: flex;
		justify-content: space-between;
	}
	.info-detail-price {
		display: flex;
		color: #FF4B5C;
		font-size: 21rpx;
		font-weight: 600;
	}
	.info-detail-count {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
	}
	/* 筛选条件样式 */
	.active {
		font-weight: bold;
		color:#000;
	}
</style>